<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.block {
				width: 8px;
				height: 8px;
				background-color: red;
				border-radius: 50%;
				position: absolute;
			}

		</style>
	</head>
	<body>
	
		
	</body>
</html>
<script>
	var flag = true;
	document.onmousedown = function(e) {

		if (flag) {
			createDiv(e.clientX, e.clientY);
		}
		

		document.onmousemove = function(e) {
			if (flag) {
				createDiv(e.clientX, e.clientY);
			} else {
				if (e.target.className == "block") {
					e.target.remove();
				}
			}
		};

		document.onmouseup = function(e) {
			document.onmousemove = null;
		};
	};

	document.oncontextmenu = function(e) {
		flag = !flag;
		e.preventDefault();
	};

	function createDiv(x, y) {
		var div = document.createElement('div');
		div.className = "block";
		div.style.left = x - 2 + 'px';
		div.style.top = y - 2 + 'px';
		document.body.appendChild(div);
	}







</script>








